<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <treeTool :treeNode="company" :isRoot="true" @addDepts='addDepts' />
        </el-row>
        <!-- //树形结构 -->
        <el-tree :data="departs" :props="defaultProps" :default-expand-all='true'>
          <treeTool :treeNode="data" slot-scope="{data}" @delDepts='getDepartments' @addDepts='addDepts' @editDepts='editDepts' />
        </el-tree>
      </el-card>
    </div>

    <!-- //新增部门组件弹层 -->
    <add-dept :showDialog.sync='showDialog' :treeNode="node" @addDepts='getDepartments' ref="addDept" />
  </div>
</template>

<script>
import treeTool from '@/components/tree-tool.vue'
import { getDepartments } from '@/api/departments'
//引入新增部门弹层
import AddDept from "./components/add-dept.vue";
//引入处理树形结构
import { tranListToTreeData } from '@/utils'
export default {
  name: 'departments',
  components: { treeTool, AddDept },
  data () {
    return {
      company: { name: '', manager: '负责人', id: '' },
      departs: [],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      },
      //控制弹层显示
      showDialog: false,
      //存储部门节点数据
      node: null
    }
  },
  created () {
    //调用自身的方法
    this.getDepartments()
  },
  methods: {
    async getDepartments () {
      const res = await getDepartments()
      this.company.name = res.companyName
      this.departs = tranListToTreeData(res.depts, '')
    },
    //点击添加按钮
    addDepts (node) {
      this.showDialog = true
      this.node = node
    },
    //点击编辑按钮
    editDepts (node) {
      this.showDialog = true
      this.node = node
      this.$refs.addDept.getDepartDetail(node.id)
    }
  }

}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
